﻿@using Model.WeiXin.DTO
@using Model.WXshopBuiness.Enum
@using Model.WXshopBuiness;
@using Xproject.Util
@{
    string Domain = CommonHelper.GetAppSettings("Domain");
    Layout = "~/Views/Shared/_ShopLayout.cshtml";
    ZXUserInfoModel basicinfo = (ZXUserInfoModel)ViewBag.basicInfo;
    List<WXProduct> Products = (List<WXProduct>)ViewData["Products"];
    string zxUserId = (string)ViewBag.zxUserId;
    ViewBag.Title = "";
}
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/css/iscroll.css" rel="stylesheet" />
<link href="~/Content/css/shop/home.css" rel="stylesheet" />

<link href="http://at.alicdn.com/t/font_jvc3xp5ob1uac3di.css" rel="stylesheet" type="text/css" />

<style>
    body {
        background: #5f3b8e;
    }

    .item img {
        width: 100%;
        height: 180px;
    }

    .carousel-inner > .item > a > img {
        display: block;
        max-width: 100%;
        line-height: 1;
    }

    .textover {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 1.6rem;
    }

    .divmoney {
        color: #fe6e12;
        font-size: 1.257em;
        display: block;
        font-family: '微软雅黑';
        float: left;
    }

    .divqisong {
        display: block;
        margin-top: 1rem;
        margin-left: 7rem;
        font-size: 0.857em;
    }

    .bianjie {
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }
    .personinfo {
        float: left;
        margin-left: 0.5rem;
        margin-top: 0.5rem;
        color: white;
    }

        .personinfo p {
            font-size: 1.2em;
        }
</style>



<!--头部-->
<div class="zhang">
    <div class="container">
        <div class="xiao">
            <a href="#"><span class="iconfont icon-xiaoxi"><i></i></span></a>
            <a href="#"><span class="iconfont icon-iconfontshezhi"></span></a>
        </div>
        <div class="tou_x">
            <a href="#">
                <div style="height: 50px;width: 50px;float: left;margin-top:4px;padding-top: 10px;">
                    <img class="iconfont icon-touxiang" src="@basicinfo.HeadUrl" style="width:50px;height:50px;border-radius: 25px;" />
                </div>
            </a>
            <div class="personinfo">
                <p style="margin-bottom:2px;">@basicinfo.NickName</p>
                <p style="margin-bottom:2px;">用户编码：@basicinfo.UserCode</p>
                <p style="margin-bottom:2px;">手机号：@basicinfo.Mobile</p>
            </div>
        </div>
    </div>
</div>

<!--列表-->

<div class="ding">
    <div class="one">
        <div class="container">
            <a href="#">
                <p class="biao">全部推广商品<i class="iconfont icon-jiantou"></i></p>
            </a>
        </div>
    </div>
    @foreach (var item in Products)
    {
        <div class="sp_pr">

            <img src="@(item.Domain+item.ThumbnailUrl1)">
            <div style="width: 100%;">
                <a href="@(Domain)/shop/ProductDetail?productId=@(item.ProductID)&zxpID=@(zxUserId)">
                    <p class="textover">@item.ProductName</p>
                    <p class="textover">@item.ShortDesc  </p>
                </a>
                <div class="xing">
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                </div>
                <div style="height:2rem;" class="xing">
                    <span class="divmoney">￥<em>@item.SalePriceStr</em></span>
                </div>
                <div>
                    <span onclick="downloadProductQRcode('@item.ProductID','@(Domain)/shop/ProductDetail?productId=@(item.ProductID)&zxpID=@(zxUserId)')">下载推广二维码</span>
                    <img class="item_img" src="" id="img@(item.ProductID)" style="display:none" />
                </div>
            </div>

        </div>
    }
</div>
<div id="pullUp" class="">
    <span class="pullUpIcon"></span>    
</div>
<script type="text/javascript">

    // PC端
    $(document).ready(function () {
        $(document).on('click', '.item_img', function () {

            $(this).ImgZoomIn();
            $(document.body).css({
               "overflow-x": "hidden",
                "overflow-y": "hidden"
            });
        });

        $(document).on('click', '#ImgZoomInImage', function () {
            $('#ImgZoomInImage').hide();
            $('#ImgZoomInBG').hide();
            $(document.body).css({
                "overflow-x": "auto",
                "overflow-y": "auto"
            });
        });
    });
    // 手机端
    $(document).ready(function () {
        $(document).on('touchend', '.item_img', function (t) {
            $(this).ImgZoomIn();
            document.ontouchstart = function () {
                return false;
            }
            t.preventDefault();
        });

     
    });
    function downloadProductQRcode(productID,productUrl) {
         $.ajax({
            type: "POST",
            url: '@(Domain)/Sales/DownloadMyTGqrcode',
            data: { productId: productID, URL: productUrl},
            cache: false,
            success: function (data) {
                if (data.Success == true) {
                    $("#img" + productID).attr("src", data.Data);
                    $("#img" + productID).ImgZoomIn();
                    $(document.body).css({
                        "overflow-x": "hidden",
                        "overflow-y": "hidden"
                    });
                    $("#ImgZoomInBG").bind("click", function (t) {
                        $('#ImgZoomInImage').hide();
                        $('#ImgZoomInBG').hide();
                        $(document.body).css({
                            "overflow-x": "auto",
                            "overflow-y": "auto"
                        });
                        document.ontouchstart = function () {
                            return true;
                        }
                        t.preventDefault();
                    });
                    
                } else {
                    layer.open({
                        content: data.Data
                        , skin: 'msg'
                        , time: 2 //2秒后自动关闭
                    });
                }
            }
        });
    }
    $.fn.ImgZoomIn = function () {
        var window_h = $(window).height();
        var scroll_h = $(window).scrollTop();

        bgstr = '<div id="ImgZoomInBG" style="position: absolute;filter:Alpha(Opacity=70); opacity:0.7;background-color: #000;display: none;"></div>';
        imgstr = '<img id="ImgZoomInImage" src="' + $(this).attr('src') + '" style="cursor:pointer; display:none; position:absolute; " />';
        if ($('#ImgZoomInBG').length < 1) {
            $('body').append(bgstr);
        }
        if ($('#ImgZoomInImage').length < 1) {
            $('body').append(imgstr);
        }
        else {
            $('#ImgZoomInImage').attr('src', $(this).attr('src'));
        }

        $('#ImgZoomInBG').css('top', scroll_h + 'px');
        $('#ImgZoomInBG').css('width', '100%');
        $('#ImgZoomInBG').css('height', window_h + 'px');

        $('#ImgZoomInImage').css('width', '100%');
        $('#ImgZoomInImage').css('height', (window_h /3 + window_h/3) + 'px');
        $('#ImgZoomInImage').css('top', (scroll_h + window_h / 6) + 'px');

        $('#ImgZoomInBG').show();
        $('#ImgZoomInImage').show();
    };
  
</script>